<template>
    <!-- 查询模块 -->
    <div class="admsearch">
      <div class="admsearch1">
        <div><p>咨询人姓名</p><vxe-input class="admseainput" v-model="NameConsultant" placeholder="请输入咨询人姓名" clearable></vxe-input></div>
        <div><p>联系电话</p><vxe-input class="admseainput" v-model="phone" placeholder="请输入联系人电话"  clearable></vxe-input></div>
        <div><p>老人姓名</p><vxe-input class="admseainput" v-model="NameOlder" placeholder="请输入老人姓名"  clearable></vxe-input></div>
      </div>
      <div class="admsearch2">
        <p><span>咨询时间</span></p>
        <p>
          <vxe-input v-model="TimeStart" placeholder="日期选择" type="date"></vxe-input>
          <span> - </span>
          <vxe-input v-model="TimeEnd" placeholder="日期选择" type="date"></vxe-input>
        </p>
        <P>
          <vxe-button class="admserbtn" content="查询" status="primary" ></vxe-button>
        </P>
      </div>
    </div>
    <!-- 功能按钮 -->
    <div class="admfunbuts">
      <!-- //新增未登记用户 -->
      <vxe-button class="btn" @click="createpersonal()" content="新增" status="primary" round></vxe-button>
      <vxe-button class="btn" content="删除"  round></vxe-button> 
    </div>
    <!-- 表格 -->
    <div>
      <vxe-table
      :data="tableData">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="老人姓名"></vxe-column>
      <vxe-column field="sex" title="老人身份证号码"></vxe-column>
      <vxe-column field="age" title="委托人姓名"></vxe-column>
      <vxe-column field="age" title="委托人电话"></vxe-column>
      <vxe-column field="age" title="咨询时间"></vxe-column>
      <vxe-column field="age" title="申请项目"></vxe-column>
      <vxe-column field="age" title="接待人"></vxe-column>
      <vxe-column field="age" title="审核状态"></vxe-column>
      <vxe-column field="age" title="操作">
          <template #default="{ row }">
            <vxe-button type="text" @click="delDetail(row)">删除</vxe-button>
            <vxe-button type="text" @click="editDetail(row)">编辑</vxe-button>
            <vxe-button type="text" @click="createDetail(row)">新增入住</vxe-button>
          </template>
      </vxe-column>
    </vxe-table>
    </div>
     
    </template>
    
    
    <script setup>
      import {useRouter} from 'vue-router'//路由
      const router = useRouter()
      import { ref } from 'vue'
      //表格信息
      const tableData = ref([
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
      ])
      // 查询参数
      const NameConsultant = ref('')//咨询人姓名
      const phone = ref('')//联系电话
      const NameOlder = ref('')//老人姓名
      const TimeStart =ref("")//咨询时间起
      const TimeEnd =ref("")//咨询时间尾
      //删除
      const delDetail = (row) => {
        console.log(row)
      }
      //编辑
      const editDetail = (row) => {
        console.log(row)
      }
      //新增入住按钮
      const createDetail = (row) => {
        // router.push('/residence_management/admission_newcheckin')
      }
      //新增未登记用户按钮
      const createpersonal = () => {
        router.push('/admission/admission_newcheckin')
      }
    </script>
   
    
    <style scoped></style>
  <style lang="less">
  .admsearch{
    width: 90%;
    height: 13vh;
    display: flex;
    flex-wrap: wrap;
    .admsearch1{ 
      display: flex;
      width: 80%;
      div{
        width: 35%;
        display: flex;
        p{
          // color: red;
          // background: pink;
          width: 90px;
          height: 34px;
          line-height: 34px;
        }
        .admseainput{
          width: 150px;
        }
      }
    }
    .admsearch2{
      width: 59%;
      display: flex;
      justify-content: space-between;
      .admserbtn{
        width: 100px;
        border-radius: 11px;
      }
    }
  }
  .admfunbuts{
    text-align: right;
    height: 50px;
    .btn{
      width: 100px;
      border-radius: 50px;
     
    }
  }
  </style>